<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" style="width:600px;">

        <el-form :model="studentForm" ref="addStudentFormRef" :rules="addEditSubjectRules">
            <el-form-item label="所在年级" :label-width="formLabelWidth" prop="gradeId">
                <el-select v-model="studentForm.gradeId" autocomplete="off" @change="filterGradeId" clearable
                    style="width: 192px;" placeholder="请选择所在年级">
                    <el-option v-for="gradeId in gradeIds" :key="gradeId" :value="gradeId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="所在班级" :label-width="formLabelWidth" prop="classId">
                <el-select v-model="studentForm.classId" autocomplete="off" placeholder="请选择所在班级" clearable
                    style="width: 192px;" @change="serachHandle">
                    <el-option v-for="item in classInfos" :key="item.classId" :value="item.classId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学生姓名" :label-width="formLabelWidth" prop="studentNumber">
                <el-select v-model="studentForm.studentNumber" autocomplete="off" placeholder="请选择学生姓名" clearable
                    style="width: 192px;" @change="changeStudent">
                    <el-option v-for="item in list" :key="item.id" :value="item.studentNumber"
                        :label="item.name"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="学生姓名" :label-width="formLabelWidth" prop="classId">
                <el-input placeholder="请输入学生姓名" v-model="studentForm.name"></el-input>
            </el-form-item> -->

            <!-- <el-transfer v-model="selectList" filterable :left-default-checked="selectList"
                :right-default-checked="rightList" :props="{
        key: 'studentNumber',
        label: 'name',
    }" :titles="['学生', '选中学生']" :button-texts="['移除', '添加']" ref="transfer" :data="list"
                @right-check-change="rightHandle" @change="changeHamdle">
            </el-transfer> -->
        </el-form>



        <template #footer style="width:400px">
            <span class="dialog-footer">
                <el-button @click="clear()">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, ElTree } from "element-plus";
import { vxRule } from "@/utils/validator";
import { getGradeIds } from "../../utils/dateFormat"

export default {
    name: "teacher",
    components: {
        ElForm,
        ElMessage,
    },
    data() {
        return {
            dialogFormVisible: ref(false),
            addEditSubjectRef: "",
            gradeIds: [],
            map: {},
            classInfos: [],
            list: [],
            selectList: [],
            user: {},
            studentForm: {
                gradeId: "",
                classId: "",
                name: "",
                studentNumber: "",
            },
            // 校验规则
            addEditSubjectRules: {
                // gradeId: vxRule(true, null, "blur"),
                // classId: vxRule(true, null, "blur"),
                name: vxRule(true, null, "blur"),
            },
        };
    },
    mounted() {
        this.gradeIds = getGradeIds()
        this.getBaseClassInfoList();
        this.user = JSON.parse(sessionStorage.getItem("user"))
        console.log(this.user);
    },
    methods: {
        closeDialog() {
            this.clear();
        },
        cancel() {
            this.clear();
        },
        clear() {
            this.dialogFormVisible = false;
            this.studentForm.gradeId = ""
            this.studentForm.classId = ""
            this.studentForm.name = ""
            this.studentForm.studentNumber = ""
            this.user.name = ""
            this.user.teacherNumber = ""
            this.user.campus = ""
        },
        changeStudent(value) {
            const arr = this.list.filter(item => item.studentNumber == value)
            this.studentForm.studentNumber = value
            if (arr.length == 1) {
                this.studentForm.name = arr[0].name
            }
        },
        serachHandle() {
            this.page = 1
            this.getBaseStudentList();
        },
        getBaseClassInfoList() {
            httpService("/javaApi/baseClassInfo/getAllEffectClass", {}, "get").then(
                (data) => {
                    this.map = data;
                }
            );
        },
        filterGradeId(val) {
            this.classInfos = this.map[val];
            this.studentForm.classId = ""
            this.page = 1
            this.getBaseStudentList();
        },

        getBaseStudentList() {
            httpService(
                "/javaApi/baseStudent/list/1/200",
                {
                    classId: this.studentForm.classId ? this.studentForm.classId : this.studentForm.classId = "",
                    gradeId: this.studentForm.gradeId ? this.studentForm.gradeId : this.studentForm.gradeId = "",
                },
                "get"
            ).then((data) => {
                this.list = data.list;
                this.total = data.total;
            });
        },
        save() {
            this.$refs.addStudentFormRef.validate((valid) => {
                if (valid) {
                    let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                    params.append("studentName", this.studentForm.name);
                    params.append("studentNumber", this.studentForm.studentNumber);
                    params.append("type", 1);
                    params.append("teacherNam", this.user.name);
                    params.append("submitter", this.user.teacherNumber);
                    params.append("campus", this.user.campus);
                    httpService("/javaApi/baseDayStudent/add", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("添加成功");
                                this.clear();
                                //刷新父组件的数据
                                this.$parent.getStudentList();
                            } else {
                                ElMessage.error("添加成功");
                            }
                        }
                    );
                }
            })
        },
    },
};
</script>
<style></style>